<template>
  <div>
    <!-- <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="top-div">
            <img src="../../assets/img-1.png" alt>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-div">
            <img src="../../assets/img-2.png" alt>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-div">
            <img src="../../assets/img-3.png" alt>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="top-div">
            <img src="../../assets/img-4.png" alt>
          </div>
        </el-col>
      </el-row>
    </div>-->
    <div class="tableDiv">
      <div style="margin-bottom:20px">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleClick">新增</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%" class="custom-table">
        <el-table-column prop="a1" label="‌盘点单编号" width="200px"></el-table-column>
        <el-table-column prop="a2" label="产品名称" width="150px"></el-table-column>
        <el-table-column prop="a3" label="品名规格" width="150px"></el-table-column>
        <el-table-column prop="a4" label="数量‌单位" width="auto"></el-table-column>
        <el-table-column prop="a5" label="‌应有盘点量" width="200px"></el-table-column>
        <el-table-column prop="a6" label="‌预盘实际量" width="100px"></el-table-column>
        <el-table-column prop="a7" label="‌盘盈或盘亏量 " width="150px"></el-table-column>
        <el-table-column prop="a8" label="‌复盘实际量 " width="160px"></el-table-column>
        <el-table-column prop="a9" label="‌盘点日期 " width="auto"></el-table-column>
        <el-table-column prop="a10" label="‌盘点人 " width="100px"></el-table-column>
        <el-table-column prop="a11" label="备注" width="160px"></el-table-column>
       
        
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small">删除</el-button>
            <el-button type="text" size="small" @click="handleClick">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top:20px">
        <el-pagination background layout="prev, pager, next" :total="100"></el-pagination>
      </div>
    </div>
    <div>
      <el-dialog title="盘点" :visible.sync="dialogVisible" width="800px">
        <div>
          <el-form :inline="true" :model="formInline" label-width="100px">
            <el-form-item label="‌盘点单编号">
              <el-input v-model="formInline.user1" placeholder="‌盘点单编号"></el-input>
            </el-form-item>
            <el-form-item label="产品名称">
              <el-input v-model="formInline.user2" placeholder="产品名称"></el-input>
            </el-form-item>
            <el-form-item label="品名规格">
              <el-input v-model="formInline.user3" placeholder="品名规格"></el-input>
            </el-form-item>
            <el-form-item label="‌应有盘点量">
              <el-input v-model="formInline.user4" placeholder="‌应有盘点量"></el-input>
            </el-form-item>
            <el-form-item label="‌预盘实际量">
              <el-input v-model="formInline.user5" placeholder="‌预盘实际量"></el-input>
            </el-form-item>
            <el-form-item label="‌盘盈或盘亏量">
              <el-input v-model="formInline.user6" placeholder="‌盘盈或盘亏量"></el-input>
            </el-form-item>
            <el-form-item label="‌复盘实际量">
              <el-input v-model="formInline.user7" placeholder="‌复盘实际量"></el-input>
            </el-form-item>
            <el-form-item label="‌盘点日期">
              <!-- <el-input v-model="formInline.user3" placeholder="‌盘点日期"></el-input> -->
              <el-date-picker v-model="formInline.user8" type="date" placeholder="‌盘点日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="‌盘点人">
              <el-input v-model="formInline.user9" placeholder="‌盘点人"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" v-model="formInline.user10" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-form>

          
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false" size="small">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [
        {
          a1: "140502-01821",
          a2: "法兰",
          a3: "高等规格",
          a4: "片",
          a5: "1,007.00",
          a6: "1,007.00",
          a7: "0",
          a8: "1,007.00",
          a9: "2024-03-10",
          a10: "董玉",
          a11: "零亏损"
        },
        {
          a1: "140502-01822",
          a2: "球阀",
          a3: "低等规格",
          a4: "台",
          a5: "357.00",
          a6: "55.00",
          a7: "-302.00",
          a8: "50.00",
          a9: "2024-05-12",
          a10: "张良",
          a11: "有亏损,亏损量很大"
        },
        {
          a1: "140502-01823",
          a2: "蓝色氧气橡胶管",
          a3: "中等规格",
          a4: "米",
          a5: "45.00",
          a6: "40.00",
          a7: "-5.00",
          a8: "40.00",
          a9: "2024-09-01",
          a10: "张亮",
          a11: "有亏损,亏损量较小"
        },
        {
          a1: "140502-01824",
          a2: "低温安全阀",
          a3: "中等规格",
          a4: "只",
          a5: "357.00",
          a6: "355.00",
          a7: "-2.00",
          a8: "355.00",
          a9: "2024-01-01",
          a10: "王宏宇",
          a11: "有亏损,亏损量较小"
        },
        {
          a1: "140502-01825",
          a2: "压力表",
          a3: "中等规格",
          a4: "只",
          a5: "480.00",
          a6: "480.00",
          a7: "0.00",
          a8: "480.00",
          a9: "2023-11-01",
          a10: "刘和立",
          a11: "零亏损"
        },
        {
          a1: "140502-01826",
          a2: "轴承",
          a3: "高等规格",
          a4: "套",
          a5: "1932.00",
          a6: "1980.00",
          a7: "+52.00",
          a8: "1952.00",
          a9: "2023-12-21",
          a10: "陈好",
          a11: "有余量，注意保养好"
        },
        {
          a1: "140502-01827",
          a2: "过滤器",
          a3: "中等规格",
          a4: "台",
          a5: "10.00",
          a6: "8.00",
          a7: "-2.00",
          a8: "8.00",
          a9: "2024-08-21",
          a10: "赵立新",
          a11: "有亏损,亏损量较小"
        },
        {
          a1: "140502-01828",
          a2: "液压阀",
          a3: "高等规格",
          a4: "个",
          a5: "500.00",
          a6: "499.00",
          a7: "-1.00",
          a8: "498.00",
          a9: "2024-06-24",
          a10: "赵英",
          a11: "有亏损,亏损量较小"
        }
      ],
      formInline: {
        user: "",
        user1: "",
        user2: "",
        user3: "",
        user4: "",
        user5: "",
        user6: "",
        user7: "",
        user8: "",
        user9: "",
        user10: "",
        region: ""
      }
    };
  },
  methods: {
    handleClick() {
      this.dialogVisible = true;
    },
    onSubmit() {
      console.log("submit!");
    }
  }
};
</script>
<style scoped >
.top-div {
  width: 100%;
  /* background-color: #fff; */
}
.top-div img {
  width: 100%;
  height: 100%;
}
.tableDiv {
  background-color: #fff;
  margin-top: 20px;
  padding: 20px;
}
.custom-table /deep/ .el-table__body td {
  font-size: 12px; /* 你想要的字体大小 */
}
</style>


